<template>
  <view class="changeStock">
    <view class="sellArea">
      <view class="box">
        <text class="title" v-if="sellList.length"> 建议卖出以下可转债 </text>
        <text v-else>本次无需进行卖出操作</text>
        <listItem
          v-for="(item, index) in sellList"
          @hasChange="handleSellChange"
          :index="index"
          :key="index"
          :info="item"
        />
      </view>
    </view>

    <view class="buyArea">
      <view class="box">
        <text class="title" v-if="buyList.length"> 建议买入以下可转债 </text>
        <text v-else>本次无需进行买入操作</text>

        <listItem
          v-for="(item, index) in buyList"
          @hasChange="handleBuyChange"
          :key="index"
          :info="item"
          :index="index"
        />
      </view>
    </view>

    <view class="totalArea box">
      <view class="info">
        <view class="text">本次换仓预计将</view>
        <view class="text"> 卖出{{ sellTotal.totalNum }}只，共{{ sellTotal.totalPrice }}元 </view>
        <view class="text"> 买入{{ buyTotal.totalNum }}只，共{{ buyTotal.totalPrice.toFixed(2) }}元 </view>
      </view>

      <view class="btnArea">
        <u-button type="primary" :custom-style="buttonStyle" :disabled="disabledConfirm" @click="confirmChange"
          >确定</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import listItem from './_components/listItem.vue';
import { buttonStyle } from '@/common/style';

import { getChangeStockList, changeStock } from './_api/index.js';

export default {
  components: {
    listItem
  },
  data() {
    return {
      sellList: [],
      buyList: []
    };
  },
  computed: {
    // hold_quantity是持仓数量,num是买入卖出数量
    disabledConfirm() {
      const valid = this.sellList.some(item => item.num > item.hold_quantity);
      return valid;
    },
    sellTotal() {
      let totalNum = 0;
      let totalPrice = 0;
      this.sellList.forEach(item => {
        totalNum += Number(item.num);
        totalPrice += Number(item.price) * 10;
      });
      return {
        totalNum,
        totalPrice
      };
    },
    buyTotal() {
      let totalNum = 0;
      let totalPrice = 0;
      this.buyList.forEach(item => {
        totalNum += Number(item.num);
        totalPrice += Number(item.price) * 10;
      });
      return {
        totalNum,
        totalPrice
      };
    },
    buttonStyle() {
      const style = buttonStyle();
      style.width = '646rpx';
      return style;
    }
  },
  methods: {
    handleSellChange(data, index) {
      this.$set(this.sellList, index, data);
    },
    handleBuyChange(data, index) {
      this.$set(this.buyList, index, data);
    },
    getChangeStockListReq() {
      getChangeStockList()
        .then(res => {
          this.sellList = res.data.should_sell;
          this.buyList = res.data.should_purchase;
        })
        .catch(_ => {});
    },

    confirmChange() {
      const data = {
        sell: this.sellList,
        purchase: this.buyList
      };
      changeStock(data)
        .then(() => {
          uni.showToast({
            title: '操作成功'
          });
          uni.switchTab({
            url: '/pages/stock/stockList/stock'
          });
        })
        .catch(_ => {});
    }
  },
  created() {
    this.getChangeStockListReq();
  },
  onPullDownRefresh() {
    this.getChangeStockListReq();
  }
};
</script>

<style lang="scss" scoped>
.title {
  display: inline-block;
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #808080;
}

.changeStock {
  margin: 30rpx auto;
  width: 690rpx;
  .buyArea {
    margin-top: 50rpx;
  }
}

.totalArea {
  margin-top: 50rpx;
  font-size: 30rpx;
  .info {
    margin-top: 30rpx;
    text-align: center;
    .text {
      margin-top: 10rpx;
    }
  }
  .btnArea {
    margin: 50rpx auto;
  }
}
</style>
